<template>
	<view class="page">
		<public-module></public-module>
		<!-- <f-navbar fontColor="#fff" :scrollTop="scrollTop" :isShowTransparentTitle="false" navbarType='5'></f-navbar> -->

		<!-- <view class="tg_title"><text class="tg_name">团购</text></view> -->
		<view class="coupon" v-if="goods && goods.length!=0">
			<view v-for="(item,index) in goods" :key="index" class="coupon-item" :class="item.status == 2?'nouse_bg':''"
				@click="onpay(item)">
				<!-- 1未使用 2已使用 -->
				<view class="coupon-item-fl">
					<text>好礼</text>
				</view>
				<view class="coupon-item-fr">
					<view class="fl">
						<text class="title">{{item.title}}</text>
						<text class="price"><text>￥</text>{{item.price}}</text>
					</view>
					<view class="fr" >去支付</view>
				</view>
				<view class="fr"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	import {
		setPay
	} from '@/config/pay';
	import {
		getAssistance,
		addAssistance,
		getAssistanceList,
		getGoodList,
		getAssistanceRate
	} from '@/config/api.js';
	import base from '@/config/baseUrl';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				ossUrl: base.ossUrl,
				shareId: 0,
				// shareId:2,
				store_id: 0,
				// store_id:7,
				level: 0,
				rate: 0,
				list: [],
				goods: [],
				has_share: false,
				isLogin: 0,
				store: [],
			}
		},
		onLoad(options) {
			var userInfo = uni.getStorageSync('userInfo')
			// this.shareId = options.shareId
			this.store_id = userInfo.store_id
		},
		onShow() {
			setTimeout(() => {
				uni.hideHomeButton()
			}, 100);
			this.getAssistanceGet(),
				this.getGoods(),
				// this.getStars();
				this.getAssistanceList()
		},
		methods: {
			jumpHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});

			},
			onpay(item) {
				setPay({
					type: 'mpwxpay', // 支付平台
					price: item.price,
					goodId: item.id,
					price: item.price,
					title: item.title,
				}, res => {
					// 小程序支付的回调
					if (res.success) {
						uni.$u.toast('支付成功')
					} else {
						if (res.data.data == undefined) {
							uni.$u.toast('支付失败')
						} else {
							uni.$u.toast(res.data.data)
						}
					}
				})
			},
			getStars() {

				let httpData = {
					shareId: this.shareId,
					store_id: this.store_id
				}

				getAssistanceRate({
					params: httpData
				}).then((res) => {
					this.level = res.level,
						this.rate = res.rate
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			getAssistanceGet() {
				let httpData = {
					shareId: this.shareId,
					store_id: this.store_id,
				}

				getAssistance({
					params: httpData
				}).then((res) => {
					this.has_share = res.has_share
					this.store = res.store
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			getGoods() {

				let httpData = {
					shareId: this.shareId,
					store_id: this.store_id,
				}

				getGoodList({
					params: httpData
				}).then((res) => {
					this.goods = res
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			getAssistanceList() {
				let httpData = {
					shareId: this.shareId,
					store_id: this.store_id,
				}
				getAssistanceList({
					params: httpData
				}).then((res) => {
					this.list = res
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			addAssistancePost() {

				var storeUserInfo = uni.getStorageSync('userInfo')
				if (!storeUserInfo.token) {
					//没有登录,先登录
					this.judgeLogin()
				} else {
					let httpData = {
						shareId: this.shareId,
						store_id: this.store_id
					}
					addAssistance(httpData).then((res) => {
						console.log(res, 'shpInfo')
						this.has_share = res.has_share
						this.getAssistanceList()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.getAssistanceGet()
						this.getGoods()
					}).catch((err) => {
						console.log(err, 'catch')
					})

				}
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background: #ffffff;

		.tg_title {

			padding: 0 20rpx;
			background-color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #f2f2f2;
			margin-top: 150rpx;

			.tg_name {
				border-left: 8rpx solid #f60011;
				padding-left: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #353434;
			}
		}

		// 卡包新样式
		.coupon {
			display: flex;
			flex-direction: column;
			margin: 20rpx;

			.coupon-item {
				display: flex;
				align-items: center;
				background-image: url('/static/new/cardbg.png'), url('/static/new/cardbg.png'), url('/static/new/cardbg_r.png');
				background-position: 89rpx -11rpx, 89rpx 229rpx, right;
				background-repeat: no-repeat, no-repeat, repeat-y;
				background-color: $uni-newcolor-primary;
				background-size: 22rpx, 22rpx, 22rpx;
				color: #ffffff;
				height: 240rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				&.nouse_bg {
					background-color: #bbbbbb !important;
				}
			}

			.coupon-item-fl {
				display: flex;
				align-items: center;
				width: 100rpx;
				padding: 0 35rpx;
				height: 100%;
				border-right: 1px dotted rgba(255, 255, 255, 0.6);
				vertical-align: top;
			}

			.coupon-item-fr {
				flex: 1;
				display: flex;
				align-items: center;
				height: 100%;

				.fl {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 20rpx;

					.title {
						font-size: 40rpx;
						line-height: 1.8;
					}

					.time {
						color: rgba(255, 255, 255, 0.7);
						font-size: 22rpx;
						line-height: 1.8;
					}

					.price {
						font-size: 35rpx !important;
						font-weight: bold;

						text {
							font-size: 20rpx !important;
							font-weight: normal;
						}
					}
				}

				.fr {
					width: 140rpx;
					height: 65rpx;
					line-height: 65rpx;
					text-align: center;
					background-color: #ffffff;
					color: $uni-newcolor-primary;
					;
					margin-right: 40rpx;
					border-radius: 8rpx;

					&.nouse {
						color: #7f7f7f !important;
					}
				}
			}
		}
	}
</style>